<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>转换</title>
		<style>
			.box{
				/* 盒子摆在body的正中间 */
				position: absolute;
				top:50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 300px;
				height: 300px;
				background-color: aqua;
				/* transform: translateX(50%) translateY(-50%); */
				
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: aquamarine;
				margin: auto;
				/transition: all 2s linear;/* 转换的中心点 */
				/* 方位词：水平方向(left,center,right) 垂直方向(top,center,bottom)
				 */
				transform-origin: 50% 50%;
			}
			/* .box2:hover{ */
				/* scale()缩放 */
				/* transform: scaleX(.5); */
			/* } */
			.box2:hover{
				/* rotate: ():旋转deg度 正数顺时针，负数逆时针;*/
				/* skew():倾斜  deg度*/
				transform: scale(2,.5);
				/* transform: scaleY(.6); */
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box2"></div>
	</body>
</html>
